<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的借阅</title>
    <style>
        /* 页面整体布局：使用flex确保页脚在底部 */
        body {
            font-family: "Helvetica Neue", sans-serif;  /* 无衬线字体，提升可读性 */
            margin: 0;  /* 清除默认外边距 */
            background-color: #f9f9f9;  /* 浅灰色背景，降低视觉疲劳 */
            display: flex;  /* 启用flex布局 */
            flex-direction: column;  /* 垂直排列子元素（导航栏、内容、页脚） */
            min-height: 100vh;  /* 最小高度为视口高度，确保占满屏幕 */
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #2c3e50;  /* 深蓝色背景，体现系统专业性 */
            padding: 15px 30px;  /* 内边距：上下15px，左右30px */
            display: flex;  /* 水平排列子元素 */
            justify-content: space-between;  /* 两端对齐（品牌、菜单、用户区） */
            align-items: center;  /* 垂直居中 */
            color: white;  /* 文字白色 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* 底部阴影，增强层次感 */
        }

        .navbar-brand {  /* 系统名称样式 */
            font-size: 24px;  /* 较大字体突出品牌 */
            font-weight: bold;  /* 粗体 */
            text-decoration: none;  /* 无下划线 */
            color: white;  /* 白色文字 */
        }

        .navbar-menu {  /* 导航菜单容器 */
            display: flex;  /* 水平排列菜单项 */
            gap: 20px;  /* 菜单项间距20px */
        }

        .navbar-menu a {  /* 菜单项链接样式 */
            color: white;  /* 白色文字 */
            text-decoration: none;  /* 无下划线 */
            font-size: 16px;  /* 标准字体大小 */
            padding: 8px 12px;  /* 内边距，增大点击区域 */
            border-radius: 4px;  /* 圆角边框 */
            transition: background-color 0.3s ease;  /* 背景色过渡动画，提升交互感 */
        }

        .navbar-menu a:hover {  /* 菜单项悬停效果 */
            background-color: #34495e;  /* 背景色加深，反馈交互 */
        }

        .navbar-auth {  /* 用户认证区域（显示用户名/登录按钮） */
            display: flex;  /* 水平排列元素 */
            align-items: center;  /* 垂直居中 */
            gap: 15px;  /* 元素间距15px */
        }

        .navbar-auth span {  /* 用户名文本样式 */
            font-size: 16px;  /* 标准字体大小 */
        }

        .auth-btn {  /* 登录/退出按钮样式 */
            padding: 8px 16px;  /* 内边距 */
            font-size: 14px;  /* 稍小字体 */
            cursor: pointer;  /* 鼠标悬停时显示手型 */
            border: none;  /* 无边框 */
            border-radius: 4px;  /* 圆角 */
            background-color: #2196F3;  /* 亮蓝色背景，突出按钮 */
            color: white;  /* 白色文字 */
            transition: background-color 0.3s ease;  /* 过渡动画 */
            text-decoration: none;  /* 无下划线（作为链接时） */
        }

        .auth-btn:hover {  /* 按钮悬停效果 */
            background-color: #1976D2;  /* 颜色加深，强化交互反馈 */
        }

        /* 主内容区样式 */
        .content {
            flex: 1;  /* 占据剩余空间，将页脚推至底部 */
            padding: 30px;  /* 内边距30px，避免内容贴边 */
        }

        h1 {  /* 页面标题样式 */
            text-align: center;  /* 居中显示 */
            color: #333;  /* 深灰色，避免纯黑刺眼 */
            margin-bottom: 20px;  /* 下外边距20px，与表格分隔 */
        }

        /* 借阅记录表格样式 */
        table {
            width: 100%;  /* 宽度占满父容器 */
            border-collapse: collapse;  /* 合并边框，避免双边框 */
            background-color: white;  /* 白色背景，与页面背景区分 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 轻微阴影，增强层次感 */
        }

        th, td {  /* 表头和单元格样式 */
            padding: 10px 12px;  /* 内边距 */
            text-align: center;  /* 内容居中 */
            border-bottom: 1px solid #ddd;  /* 底部边框，分隔行 */
        }

        th {  /* 表头样式 */
            background-color: #f0f0f0;  /* 浅灰色背景，区分表头与内容 */
            color: #333;  /* 深灰色文字 */
        }

        tr:hover {  /* 行悬停效果 */
            background-color: #f5f5f5;  /* 背景色变浅，突出当前行 */
        }

        /* 操作按钮样式（如缴费按钮） */
        .action-btn {
            padding: 6px 12px;  /* 内边距 */
            font-size: 14px;  /* 字体大小 */
            border: none;  /* 无边框 */
            border-radius: 4px;  /* 圆角 */
            cursor: pointer;  /* 手型光标 */
            color: white;  /* 白色文字 */
            background-color: #FF9800;  /* 橙色背景，突出操作按钮 */
            text-decoration: none;  /* 无下划线（作为链接时） */
        }

        .action-btn:hover {  /* 按钮悬停效果 */
            background-color: #e68a00;  /* 颜色加深 */
        }

        /* 页脚样式 */
        .footer {
            background-color: #2c3e50;  /* 与导航栏一致的深蓝色 */
            color: white;  /* 白色文字 */
            text-align: center;  /* 文字居中 */
            padding: 15px;  /* 内边距 */
            font-size: 14px;  /* 较小字体 */
        }

        .footer a {  /* 页脚链接样式 */
            color: #2196F3;  /* 亮蓝色，与按钮呼应 */
            text-decoration: none;  /* 无下划线 */
        }

        .footer a:hover {  /* 链接悬停效果 */
            text-decoration: underline;  /* 下划线，提示可点击 */
        }
    </style>
    <script>
        // 页面DOM加载完成后执行：初始化“我的借阅”链接
        document.addEventListener('DOMContentLoaded', function () {
            const userId = localStorage.getItem('userId');  // 从localStorage获取用户ID（登录时存储）
            if (userId) {
                // 动态设置“我的借阅”链接，携带用户ID参数（用于查询该用户的借阅记录）
                const link = document.getElementById('myBorrowingsLink');
                link.href = '/borrowing/student/borrowings?userId=' + encodeURIComponent(userId);
            }
        });

        // 退出登录函数：清除登录状态并跳转至登录页
        function logout() {
            // 清除localStorage中存储的登录信息（令牌、用户类型、ID、用户名）
            localStorage.removeItem('token');
            localStorage.removeItem('userType');
            localStorage.removeItem('userId');
            localStorage.removeItem('username');
            window.location.href = '/user/login';  // 重定向到登录页
        }

        // 页面加载完成后执行：验证登录状态
        window.onload = function () {
            const token = localStorage.getItem('token');  // 获取JWT令牌（登录凭证）
            if (!token) {
                window.location.href = '/user/login';  // 未登录 → 跳转登录页
            }
            const username = localStorage.getItem('username');  // 获取用户名
            const authSection = document.getElementById('authSection');  // 获取用户认证区域元素
            if (token && username) {
                // 已登录：显示用户名和退出按钮
                authSection.innerHTML = `
                    <span>欢迎，用户：${username}</span>
                    <a href="/user/login" class="auth-btn" onclick="logout()">退出</a>
                `;
            } else {
                // 登录状态无效：显示登录按钮并强制跳转登录页
                authSection.innerHTML = `
                    <a href="/user/login" class="auth-btn">登录</a>
                `;
                window.location.href = '/user/login';
            }
        };

        // 逾期费用支付函数
        function payOverdueFee(borrowingId) {
            if (confirm('确认缴费？')) {  // 弹窗确认缴费操作，防止误触
                // 发送POST请求到后端缴费接口
                fetch(`/borrowing/student/pay/${borrowingId}?userId=`+localStorage.getItem('userId'), {
                    method: 'POST',  // 请求方法：POST
                    headers: {
                        'Content-Type': 'application/json',  // 请求体格式：JSON
                        'Authorization': 'Bearer ' + localStorage.getItem('token'),  // 携带JWT令牌验证身份
                        'userId': localStorage.getItem('userId')  // 携带用户ID参数
                    }
                })
                    .then(response => response.json())  // 解析响应为JSON
                    .then(data => {
                        if (data.code === 0) {  // 后端返回code=0 → 缴费成功
                            alert(data.message);  // 显示成功提示
                            window.location.reload();  // 刷新页面，更新记录状态
                        } else {  // 缴费失败
                            alert(data.message);  // 显示失败原因（如后端返回的错误信息）
                        }
                    })
                    .catch(error => {  // 捕获网络错误等异常
                        alert('请求失败：' + error.message);
                    });
            }
        }
    </script>
</head>
<body>
<header class="navbar">
    <a href="/" class="navbar-brand">应急图书管理系统</a>  <!-- 系统名称链接，点击返回首页 -->
    <div class="navbar-menu">  <!-- 导航菜单 -->
        <a href="/book/student/books">首页</a>  <!-- 首页链接 -->
        <a href="/book/student/books">图书列表</a>  <!-- 图书列表链接 -->
        <a id="myBorrowingsLink" href="/borrowing/student/borrowings">我的借阅</a>  <!-- 我的借阅链接（JS动态完善参数） -->
    </div>
    <div class="navbar-auth" id="authSection">  <!-- 用户认证区域（JS动态填充内容） -->
        <!-- 初始内容：Thymeleaf表达式显示用户名（未登录时会被JS覆盖） -->
        <span>欢迎，用户：<span th:text="${username}"></span></span>
        <a th:href="@{/user/login}" class="auth-btn" onclick="logout()">退出</a>
    </div>
</header>

<main class="content">
    <h1>我的借阅</h1>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>书名</th>
            <th>借阅时间</th>
            <th>应还时间</th>
            <th>归还时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="borrowing : ${borrowings}">
            <td th:text="${borrowing.id}"></td>
            <td th:text="${borrowing.book.title}"></td>
            <td th:text="${#temporals.format(borrowing.borrowTime, 'yyyy-MM-dd HH:mm')}"></td>
            <td th:text="${#temporals.format(borrowing.dueTime, 'yyyy-MM-dd HH:mm')}"></td>
            <td th:text="${borrowing.returnTime != null} ? ${#temporals.format(borrowing.returnTime, 'yyyy-MM-dd HH:mm')} : '-'"></td>
            <td th:switch="${borrowing.status}">
                <span th:case="'BORROWED'">借阅中</span>
                <span th:case="'RETURNED'">已归还</span>
                <span th:case="'OVERDUE'">逾期</span>
                <span th:case="'OVERDUE_PAID'">逾期已缴费</span>
            </td>
            <td>
                <a th:if="${borrowing.status == 'OVERDUE' and borrowing.overdueFee != 0}"
                   th:onclick="'payOverdueFee(' + ${borrowing.id} + ')'"
                   class="action-btn">缴费</a>
            </td>

        </tr>
        <tr th:if="${#lists.isEmpty(borrowings)}">
            <td colspan="8">暂无数据</td>
        </tr>
        </tbody>
    </table>
</main>

<footer class="footer">
    <p>© 2025 应急图书管理系统 | 联系我们: <a href="mailto:support@bookmanagement.com">support@bookmanagement.com"></a></p>
</footer>
</body>
</html>